<template>
  <div class="userContainer" :style="'min-height: '+docheight+'px'">
    <div v-if="!showTimeOut&&showCont">
      <div class="centerTop">
        <div class="userCont">
          <div class="userImg">
            <img :src="userInfo.head_img+ossSrc">
          </div>
          <div class="userInfo">
            <div class="userName">{{ userInfo.nick_name }}</div>
          </div>
        </div>
        <div class="topCard">
          <div class="cardItem">
            <div class="cardName">消费金额</div>
            <div class="cardVal">{{ userInfo.consumption_price }}</div>
          </div>
          <div class="cardLine"></div>
          <div class="cardItem">
            <div class="cardName">累计订单</div>
            <div class="cardVal">{{ userInfo.order_sum }}</div>
          </div>
        </div>
      </div>
      <div class="centerList">
        <div class="listItem" @click="listFn(item)" :key="index" v-for="(item,index) in listArr">
          <div :class="'iconfont '+item.icon"></div>
          <div class="listItemVal">
            {{item.val}}
          </div>
          <div class="iconfont icon-jinrujiantou"></div>
        </div>
      </div>
      <div class="userTip">
          <div class="telLine"><span class="iconfont icon-kefu2"></span> 客服热线:{{ userInfo.hotline_mobile }}</div>
          <div>技术支持:四川省本地鸟科技有限公司</div>
      </div>
    </div>
    <footcpm></footcpm>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <toast v-model="showToast" width="50%" position="middle" type="text" :time="1000">{{showText}}</toast>
  </div>
</template>

<script>
import {Toast } from 'vux'
import footcpm from '@/components/footcpm'
import { my } from '@/http/api'
import getLoad from '@/components/public/getLoad'
import getTimeOut from '@/components/public/getTimeOut'
export default {
  components:{getTimeOut,getLoad,Toast,footcpm},
  data(){
    return{
      showTimeOut: false,
      showCont:false,
      showText:'',
      showToast:false,
      listArr:[
        {val:'消费记录',icon:'icon-xiaofeijilu'},
        {val:'关于我们',icon:'icon-guanyu'},
        {val:'教师招募',icon:'icon-zhaopin'},
        {val:'商务合作',icon:'icon-hezuo'},
      ],
      userInfo:{},
    }
  },
  methods:{
    getData(){
      my().then((res)=>{
        if(res.data.code==1){
          this.userInfo = res.data.data
        }else{
          this.showToast = true
          this.showText = '用户信息获取失败'
        }
        this.showCont= true
      }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
        })
    },
    listFn(item){
      if(item.val=='关于我们'){
        this.$router.push({path:'/about'})
      }else if(item.val=='消费记录'){
        this.$router.push({path:'/record'})
      }else if(item.val=='教师招募'){
        this.$router.push({path:'/techJoin'})
      }else if(item.val=='商务合作'){
        this.$router.push({path:'/shopJoin'})
      }
    },
  },
  
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="less">
.userContainer{
  // background-color: #FFFEF2;
  width: 100%;
  padding-bottom:3.5rem;
  box-sizing: border-box;
  .gzMask{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      color: white;
      z-index: 111;
      display: flex;
      align-items: center;
      justify-content: center;
      .gzImgCont{
        width: 50%;
        text-align: center;
        img{
          width: 100%;
          border-radius: 0.25rem;
        }
        .erweimaText{
          margin-top: 0.25rem;
        }
        .closeaErweima{
          margin-top: 0.75rem;
          border: 1px solid #fff;
          padding: 0.25rem;
          border-radius: 2rem;
        }
      }
      .bigMaskImg{
        width: 90%;
        .closeaErweima{
          width: 60%;
          margin: 1.5rem auto 0;
        }
      }
    }
  .centerTop{
    width: 100%;
    background-image:linear-gradient(to bottom,#6455d4,#9086d7);
    padding: 1.5rem 4% 1.25rem;
    box-sizing: border-box;
    .userCont{
      width: 100%;
      // align-items: center;
      // display: flex;
      .userImg{
        width: 4rem;
        height: 4rem;
        position: relative;
        margin: 0 auto;
        border-radius: 50%;
        .boyIcon{
          background-color: #6455d4;
        }
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .userInfo{
        color: rgb(240,240,240);
        text-align: center;
        margin-top: 0.75rem;
        .userName{
          font-size: 0.8rem;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: bold;
        }
        .userTel{
          font-size: 0.6rem;
          margin-top: 0.25rem;
          display: flex;
          align-items: center;
        }
        .userDes{
          width: 100%;
          margin-top: 0.25rem;
          font-size: 0.6rem;
          overflow:hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .seticon{
        margin-right: 1.5rem;
        font-size:1.2rem;
        color: white;
      }
    }
    .topCard{
      width: 100%;
      display: flex;
      justify-self: center;
      margin-top: 1rem;
      align-items: center;
      .cardLine{
        height: 1.5rem;
        width: 1px;
        background-color: #ddd;
      }
      .cardItem{
        width: 100/2%;
        text-align: center;
        padding: 0.5rem 0;
        color: white;
        .cardName{
          font-size: 0.7rem;
        }
        .cardVal{
          font-size: 1rem;
          font-weight: bold;
          margin-top: 0.4rem;
        }
      }
    }
  }
  .centerList{
    width: 100%;
    padding: 0 4%;
    margin-top: 1rem;
    box-sizing: border-box;
    .listItem{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.7rem 0;
      .iconfont{
        font-size: 1.1rem;
      }
      .listItemVal{
        margin: 0 1.25rem;
        width: 0.5rem;
        flex: 1;
        font-size: 0.7rem;
      }
    }
  }
  .userTip{
      color: #666;
      position: absolute;
      font-size: 0.6rem;
      text-align: center;
      bottom: 4rem;
      left: 0;
      width: 100%;
      .telLine{
        margin-bottom: 0.75rem;
      }
  }
}
</style>
